<template>
  <div class="flex">
    <div class="team-title">大屏可视化</div>
    <div ref="attendance" class="chart-dom" />
  </div>
</template>

<script setup lang="ts">
import type { EChartsOption } from "echarts";
import { nextTick, Ref, ref, watch, PropType } from "vue";
import { useECharts } from "../chartHooks/echartsHooks";
const attendance = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(attendance as Ref<HTMLDivElement>);
const props = defineProps({
  data: {
    type: Object as PropType<EChartsOption>,
    required: true,
  },
});
watch(
  () => props.data,
  (val) => {
    nextTick(() => {
      setOptions(val);
    });
  },
  {
    deep: true,
  }
);
</script>
